<template>
  <div class="container">
    <el-form label-width="100px">
      <el-row :gutter="20">
        <el-col :lg="8" :xl="4">
          <el-form-item label="名称/账号">
            <el-input
              type="text"
              v-model="queryParam.userName"
              placeholder="请输入名称/账号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="8" :xl="4">
          <el-form-item label="状态">
            <el-select
              clearable
              v-model="queryParam.userStatus"
              placeholder="请选择状态"
            >
              <el-option label="全部" value=""></el-option>
              <el-option label="禁用" value="SUSPEND"></el-option>
              <el-option label="正常" value="NORMAL"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="8" :xl="4">
          <el-form-item label="角色">
            <el-select
              clearable
              v-model="queryParam.roleId"
              placeholder="请选择角色"
            >
              <el-option
                v-for="(item, index) in roleList"
                :key="index"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="8" :xl="6">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button
            type="success"
            @click="addUser"
            v-if="$util.btnShowAuthority('/systemUser/createUser')"
            >新增用户</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        style="width: 100%" >
        <el-table-column
          label="名称"
          align="center"
          prop="userName"
        ></el-table-column>
        <el-table-column
          label="状态"
          align="center"
          prop="userStatus"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ changeStatus(scope.row.userStatus) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="账号"
          align="center"
          prop="userAccount"
        ></el-table-column>
        <el-table-column
          label="手机号"
          align="center"
          prop="mobile"
        ></el-table-column>
        <el-table-column
          label="角色"
          align="center"
          prop="roleName"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-tooltip content="修改账户" placement="top">
              <i
                class="el-icon-edit"
                @click="editAccountHandle(scope.row)"
                v-if="$util.btnShowAuthority('/systemUser/updateUser')"
              ></i>
            </el-tooltip>
            <!--            <span style="margin: 0 10px;position:relative;top: -1px;color:#ccc">-->
            <!--              |-->
            <!--            </span>-->
            <!--            <el-tooltip content="删除" placement="top">-->
            <!--              <i class="el-icon-delete" @click="deleteAccount(scope.row)"></i>-->
            <!--            </el-tooltip>-->
            <span
              style="margin: 0 10px;position:relative;top: -1px;color:#ccc"
              v-if="$util.btnShowAuthority('/systemUser/resetPassword')"
            >
              |
            </span>
            <el-tooltip content="重置密码" placement="top">
              <i
                class="el-icon-refresh"
                @click="resetPassword(scope.row)"
                v-if="$util.btnShowAuthority('/systemUser/resetPassword')"
              ></i>
            </el-tooltip>
            <!--            <span-->
            <!--              style="margin: 0 10px; position: relative; top: -1px; color: #ccc"-->
            <!--              v-if="scope.row.status"-->
            <!--            >-->
            <!--              |-->
            <!--            </span>-->
            <!--            <el-tooltip content="禁用" placement="top">-->
            <!--              <i-->
            <!--                class="el-icon-video-pause"-->
            <!--                @click="disableAccount(scope.row, false)"-->
            <!--                v-if="scope.row.status"-->
            <!--              ></i>-->
            <!--            </el-tooltip>-->
            <!--            <span-->
            <!--              style="margin: 0 10px;position:relative;top: -1px;color:#ccc"-->
            <!--              v-if="!scope.row.status"-->
            <!--            >-->
            <!--              |-->
            <!--            </span>-->
            <!--            <el-tooltip content="启用" placement="top">-->
            <!--              <i-->
            <!--                class="el-icon-video-play"-->
            <!--                @click="disableAccount(scope.row, true)"-->
            <!--                v-if="!scope.row.status"-->
            <!--              ></i>-->
            <!--            </el-tooltip>-->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :current-page="queryParam.pageNumber"
          :page-size="queryParam.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pageTotal"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
    <AddUser
      :isTrue="openModel"
      @closeModel="handleClose"
      :roleList="roleList"
    ></AddUser>
    <modify-user
      :isModifyShow="isModifyShow"
      :account="modifyAccount"
      :companyId="companyId"
      @closeModel="handleClose"
      :userName="userName"
      :mobile="mobile"
      :roleId="roleId"
      :roleList="roleList"
    ></modify-user>
  </div>
</template>
<script>
import serve from "@/api/jurisdiction";
import AddUser from "./compoents/AddUser";
import ModifyUser from "./compoents/ModifyUser";

export default {
  name: "Account",
  components: {
    AddUser,
    ModifyUser
  },
  data() {
    return {
      userName: "",
      modifyAccount: "",
      roleId: "",
      mobile: "",
      modifyId: "",
      companyId: "",
      isModifyShow: false,
      openModel: false,
      tableData: [],
      queryParam: {
        userName: "",
        userStatus: "",
        roleId: "",
        pageNumber: 1,
        pageSize: 10
      },
      pageTotal: 0,
      roleList: []
    };
  },
  created() {
    this.getRoleList();
    this.getList();
  },
  methods: {
    // 禁用/启用
    disableAccount(val, type) {
      const title = type ? "启用" : "禁用";
      this.$confirm(`账户${val.userName}将被${title}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: "normal-btn",
        type: "warning"
      }).then(() => {
        serve
          .accountUpdateStatusServe({
            id: val.id,
            status: val.status ? "0" : "1"
          })
          .then(res => {
            if (res.code === 200) {
              this.getList();
              this.$message.success("操作成功");
            } else {
              this.$message.error(res.errorMsg);
            }
          });
      });
    },
    resetPassword(row) {
      this.$confirm("确认重置该账户密码?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: "normal-btn",
        type: "warning"
      }).then(() => {
        serve
          .resetPassword({
            companyId: row.companyId,
            userAccount: row.userAccount
          })
          .then(res => {
            if (res.code === 200) {
              this.$notify.success({
                dangerouslyUseHTMLString: true,
                message:
                  res.message +
                  "<br> 账号：" +
                  res.data.userAccount +
                  "<br> 密码：" +
                  res.data.loginPassword +
                  ' <span style="color:#f00;font-size: 12px;"> (请及时保存密码)</span>',
                duration: 0
              });
              this.getList();
            } else {
              this.$notify.error(res.message);
            }
          });
      });
    },
    // 删除账户
    deleteAccount(val) {
      this.$confirm("此账户将删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        serve.accountDelServe(val.id).then(res => {
          if (res.code === 200) {
            this.getList();
            this.$message.success("删除成功");
          } else {
            this.$message.error(res.errorMsg);
          }
        });
      });
    },
    handleClose() {
      this.openModel = false;
      this.isModifyShow = false;
      this.getList();
    },
    // 添加用戶
    addUser() {
      this.openModel = true;
    },
    // 获取列表
    getList() {
      serve
        .accountListServe(this.queryParam)
        .then(res => {
          if (res.code === 200) {
            this.tableData = res.data.list;
            this.pageTotal = res.data.total;
          }
        })
        .catch(err => this.$message.error(err))
        .finally(() => {});
    },
    // 修改账户
    editAccountHandle(scope) {
      this.modifyAccount = scope.userAccount + "";
      this.userName = scope.userName;
      this.mobile = scope.mobile;
      this.roleId = scope.roleId;
      this.isModifyShow = true;
    },
    // 列表角色状态解析
    changeStatus(val) {
      switch (val) {
        case "NORMAL":
          return "正常";
        case "OFF":
          return "禁用";
        default:
          break;
      }
    },
    // 获取所有用户
    getRoleList() {
      serve.getRoleListServe().then(res => {
        if (res.code === 200) {
          res.data.forEach(item => {
            this.roleList.push({
              label: item.roleName,
              value: item.id,
              defaultChecked: false
            });
          });
        } else {
          this.$message.error(res.errorMsg);
        }
      });
    },
    // 查询按钮
    search() {
      this.queryParam.pageNumber = 1;
      this.getList();
    },
    // 分页切换
    handlePageChange(val) {
      this.queryParam.pageNumber = val;
      this.getList();
    },
    // 分页切换
    handleSizeChange(val) {
      this.queryParam.pageSize = val;
      this.getList();
    }
  }
};
</script>
<style scoped>
#container .el-table th.gutter {
  display: table-cell !important;
}
</style>
